/**
 * @File   : History.js
 * @Author : xue.xiaoBing
 * @Date   : 2021/4/22
 * @Desc   : 学生历史记录
 **/

import moment from 'moment';
import React, {Component} from "react";
import {Row, Col, Tabs, Menu, Divider, Comment, Tooltip, Avatar} from "antd";
import {AppstoreOutlined, SettingOutlined, LikeOutlined, DislikeOutlined} from '@ant-design/icons';

import HomeHeader from "src/components/head/homeHeader/HomeHeader";

const {SubMenu} = Menu;

const {TabPane} = Tabs;

class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  render() {
    const actions = [
      <Tooltip key="comment-basic-like" title="Like">
      <span>
        <LikeOutlined/>
        <span className="comment-action" style={{marginLeft: '5px'}}>{0}</span>
      </span>
      </Tooltip>,
      <Tooltip key="comment-basic-dislike" title="Dislike">
      <span>
         <DislikeOutlined/>
        <span className="comment-action" style={{marginLeft: '5px'}}>{0}</span>
      </span>
      </Tooltip>,
      <span key="comment-basic-reply-to">Reply to</span>,
    ];
    return (
      <div>
        <div>
          <HomeHeader/>
        </div>
        <div className="card-container" style={{backgroundColor: 'rgba(0,0,0,.1)'}}>
          <Row style={{padding: '20px 10%'}}>
            <Col span={6}>
              <Menu
                style={{padding: '10px', height: '630px', borderRadius: '5px', width: '95%'}}
                defaultSelectedKeys={['2']}
                defaultOpenKeys={['sub2']}
                mode="inline"
              >
                <SubMenu key="sub2" icon={<AppstoreOutlined/>} title="我的学习">
                  <Menu.Item key="1">我的课程</Menu.Item>
                  <Menu.Item key="2">我的考试</Menu.Item>
                  <Menu.Item key="3">我的作业</Menu.Item>
                  <Menu.Item key="4">我的问答</Menu.Item>
                </SubMenu>
                <SubMenu key="sub4" icon={<SettingOutlined/>} title="我的设置">
                  <Menu.Item key="5">个人信息</Menu.Item>
                  <Menu.Item key="6">修改密码</Menu.Item>
                  <Menu.Item key="7">人物描述</Menu.Item>
                  <Menu.Item key="8">信息反馈</Menu.Item>
                </SubMenu>
              </Menu>
            </Col>
            <Col span={18} style={{backgroundColor: 'white', padding: '20px', minHeight: '630px', borderRadius: '5px'}}>
              <span style={{margin: '0 20px', color: 'skyblue', fontSize: '20px'}}>我的学习</span>
              <Divider style={{margin: '20px 0'}}/>
              <Tabs type="card" style={{margin: '0 20px'}}>
                <TabPane tab="学 习 中" key="1">
                  <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={
                      <Avatar
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                      />
                    }
                    content={
                      <p>
                        We supply a series of design principles, practical patterns and high quality design
                        resources (Sketch and Axure), to help people create their product prototypes beautifully
                        and efficiently.
                      </p>
                    }
                    datetime={
                      <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                        <span>{moment().fromNow()}</span>
                      </Tooltip>
                    }
                  />
                  <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={
                      <Avatar
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                      />
                    }
                    content={
                      <p>
                        We supply a series of design principles, practical patterns and high quality design
                        resources (Sketch and Axure), to help people create their product prototypes beautifully
                        and efficiently.
                      </p>
                    }
                    datetime={
                      <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                        <span>{moment().fromNow()}</span>
                      </Tooltip>
                    }
                  />
                  <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={
                      <Avatar
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                      />
                    }
                    content={
                      <p>
                        We supply a series of design principles, practical patterns and high quality design
                        resources (Sketch and Axure), to help people create their product prototypes beautifully
                        and efficiently.
                      </p>
                    }
                    datetime={
                      <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                        <span>{moment().fromNow()}</span>
                      </Tooltip>
                    }
                  />
                </TabPane>
                <TabPane tab="已 学 完" key="2">
                  <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={
                      <Avatar
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                      />
                    }
                    content={
                      <p>
                        We supply a series of design principles, practical patterns and high quality design
                        resources (Sketch and Axure), to help people create their product prototypes beautifully
                        and efficiently.
                      </p>
                    }
                    datetime={
                      <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                        <span>{moment().fromNow()}</span>
                      </Tooltip>
                    }
                  />
                  <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={
                      <Avatar
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                      />
                    }
                    content={
                      <p>
                        We supply a series of design principles, practical patterns and high quality design
                        resources (Sketch and Axure), to help people create their product prototypes beautifully
                        and efficiently.
                      </p>
                    }
                    datetime={
                      <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                        <span>{moment().fromNow()}</span>
                      </Tooltip>
                    }
                  />
                  <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={
                      <Avatar
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                      />
                    }
                    content={
                      <p>
                        We supply a series of design principles, practical patterns and high quality design
                        resources (Sketch and Axure), to help people create their product prototypes beautifully
                        and efficiently.
                      </p>
                    }
                    datetime={
                      <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                        <span>{moment().fromNow()}</span>
                      </Tooltip>
                    }
                  />
                </TabPane>
                <TabPane tab="收 藏" key="3">
                  <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={
                      <Avatar
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                      />
                    }
                    content={
                      <p>
                        We supply a series of design principles, practical patterns and high quality design
                        resources (Sketch and Axure), to help people create their product prototypes beautifully
                        and efficiently.
                      </p>
                    }
                    datetime={
                      <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                        <span>{moment().fromNow()}</span>
                      </Tooltip>
                    }
                  />
                  <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={
                      <Avatar
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                      />
                    }
                    content={
                      <p>
                        We supply a series of design principles, practical patterns and high quality design
                        resources (Sketch and Axure), to help people create their product prototypes beautifully
                        and efficiently.
                      </p>
                    }
                    datetime={
                      <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                        <span>{moment().fromNow()}</span>
                      </Tooltip>
                    }
                  />
                  <Comment
                    actions={actions}
                    author={<a>Han Solo</a>}
                    avatar={
                      <Avatar
                        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                        alt="Han Solo"
                      />
                    }
                    content={
                      <p>
                        We supply a series of design principles, practical patterns and high quality design
                        resources (Sketch and Axure), to help people create their product prototypes beautifully
                        and efficiently.
                      </p>
                    }
                    datetime={
                      <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                        <span>{moment().fromNow()}</span>
                      </Tooltip>
                    }
                  />
                </TabPane>
              </Tabs>
            </Col>

          </Row>
        </div>
      </div>

    )
  }
}

export default Profile